<template>
	<div class="wrapper">
		<!--header-->
		<header>
			<div class="back"><p onclick="location.href='index.html'">&lt;</p></div>
			<p>订单列表</p>
		</header>
		
		<!--orderList-->
		<h3>未支付订单信息</h3>
		<ul class="order">
			<li v-for="item in orderArr">
				<div class="show" v-if="item.orderState==0">
				<div class="order-info">
					<p>{{item.business.businessName}}
					<i class="fa fa-caret-down" @click="detailShow(item)"></i>
					</p>
					<div class="order-r">
						<p>&#165;{{item.orderTotal}}</p>
						<div class="order-r-icon" @click="toPayment(item.orderId)">去支付	</div>
					</div>
				</div>
				<ul class="order-detail" v-show="item.isShowDetail">
					<li v-for="oditem in item.list">
						<p>{{oditem.food.foodName}} x {{oditem.quantity}}</p>
						<p>&#165;{{oditem.food.foodPrice*oditem.quantity}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{item.business.deliveryPrice}}</p>
					</li>
				</ul>
				</div>
			</li>
			
		</ul>
		
		<h3>已支付订单信息</h3>
		<ul class="order">
			<li v-for="item in orderArr">
				<div class="show" v-if="item.orderState==1">
				<div class="order-info">
					<p>{{item.business.businessName}}
					<i class="fa fa-caret-down" @click="detailShow(item)"></i>
					</p>
					<div class="order-r">
						<p>&#165;{{item.orderTotal}}</p>
						
					</div>
				</div>
				<ul class="order-detail" v-show="item.isShowDetail">
					<li v-for="oditem in item.list">
						<p>{{oditem.food.foodName}} x {{oditem.quantity}}</p>
						<p>&#165;{{oditem.food.foodPrice*oditem.quantity}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{item.business.deliveryPrice}}</p>
					</li>
				</ul>
				</div>
			</li>
		</ul>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default{
		name:'OrderList',
		data(){
			return{
				orderArr:[],
				user:{},
				paidArr:[]
			}
		},
		created(){
			this.user = this.$getSessionStorage('user');
			this.$axios.post('OrdersController/listOrdersByUserId',this.$qs.stringify({
				userId:this.user.userId
			})).then(response=>{
				let result = response.data;
				for(let orders of result){
					orders.isShowDetail = false;
				}
				this.orderArr = result;
				console.log(this.orderArr);
			}).catch(error=>{
				console.error(error);
			});
		},
		components:{
			Footer
		},
		methods:{
			detailShow(orders){
				orders.isShowDetail = !orders.isShowDetail;
			},
			//去支付
			toPayment(orderId) {
				this.$router.push({path:'/payment',query:{orderId:orderId}});
			}
		}
	}
</script>

<style scoped>
	/****************总容器*********************/
	
	.wrapper{
		width: 100%;
		height: 100%;
		
	}
	
	/****************header*********************/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wrapper header .back{
		position: absolute;
		width: 2vw;
		height: 2vw;
		left: 1.5vw;
		top: 2.8vw;
		user-select:none;
		cursor: pointer;
	}
	
	.wrapper h3{
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999999;
	}
	.wrapper h3:last-child{
		margin-top: 0;
	}
	
	.wrapper .order{
		width: 100%;
	}
	.wrapper .order li{
		width: 100%;
	}
	.wrapper .order li .order-info{
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666666;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order li .order-info .order-r{
		display: flex;
	}
	.wrapper .order li .order-info .order-r .order-r-icon{
		background-color: #f90;
		color: #FFFFFF;
		border-radius: 3px;
		margin-left: 2vw;
		user-select:none;
		cursor: pointer;
	}
	
	.wrapper .order li .order-detail{
		width: 100%;
	}
	.wrapper .order li .order-detail li{
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666666;
		font-size: 3vw;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		}
	
</style>
